<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue';
export default {
  data () {
    return {
      cdata: {
        xData: [],
        yData: [],
      },
      // websocket 获得的数据
      storeDatas: null,
      // 存储的次数
      count: 0
    }
  },
  components: {
    Chart,
  },
  mounted () {
  // 注册监听事件
  window.addEventListener('onmessageWS', this.getsocketData)
  // 定义数据
  let sandData = {"msgtype":"startsubscribe","p1":1000,"ps":["Sim1#tag1"]}
  // 发送数据
  this.$sendMg(sandData)

  },
  methods: {
    // 接收消息
    getsocketData(e){
      const data = e && e.detail.data     // 接收的数据
      this.storeDatas = JSON.parse(data)  // JSON转化为对象格式

      console.log(data, 3)
      let timeData = this.storeDatas.values[0].time.split(' ')[1]  // 时间
      let valueData = this.storeDatas.values[0].value.toFixed(2)   // 数字
      console.log(timeData, valueData);

      // 存入数组
      if(this.count >= 7) {
        this.cdata.xData.shift()  // 去头
        this.cdata.yData.shift()  // 去头
      }
        this.cdata.xData.push(timeData)  // 数据塞入x轴
        this.cdata.yData.push(valueData)  // 数据塞入x轴
        this.count++
    }
  },
  destroyed() {
  // 在需要的时候卸载监听事件，比如离开页面
  window.removeEventListener('onmessageWS', this.getsocketData)
  }
}
</script>

<style lang="scss" scoped>
</style>